<!DOCTYPE html>
<html>
<head>
<title>Web-day01-05</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
/* GitHub stylesheet for MarkdownPad (http://markdownpad.com) */
/* Author: Nicolas Hery - http://nicolashery.com */
/* Version: b13fe65ca28d2e568c6ed5d7f06581183df8f2ff */
/* Source: https://github.com/nicolahery/markdownpad-github */

/* RESET
=============================================================================*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
}

/* BODY
=============================================================================*/

body {
  font-family: Helvetica, arial, freesans, clean, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: #333;
  background-color: #fff;
  padding: 20px;
  max-width: 960px;
  margin: 0 auto;
}

body>*:first-child {
  margin-top: 0 !important;
}

body>*:last-child {
  margin-bottom: 0 !important;
}

/* BLOCKS
=============================================================================*/

p, blockquote, ul, ol, dl, table, pre {
  margin: 15px 0;
}

/* HEADERS
=============================================================================*/

h1, h2, h3, h4, h5, h6 {
  margin: 20px 0 10px;
  padding: 0;
  font-weight: bold;
  -webkit-font-smoothing: antialiased;
}

h1 tt, h1 code, h2 tt, h2 code, h3 tt, h3 code, h4 tt, h4 code, h5 tt, h5 code, h6 tt, h6 code {
  font-size: inherit;
}

h1 {
  font-size: 28px;
  color: #000;
}

h2 {
  font-size: 24px;
  border-bottom: 1px solid #ccc;
  color: #000;
}

h3 {
  font-size: 18px;
}

h4 {
  font-size: 16px;
}

h5 {
  font-size: 14px;
}

h6 {
  color: #777;
  font-size: 14px;
}

body>h2:first-child, body>h1:first-child, body>h1:first-child+h2, body>h3:first-child, body>h4:first-child, body>h5:first-child, body>h6:first-child {
  margin-top: 0;
  padding-top: 0;
}

a:first-child h1, a:first-child h2, a:first-child h3, a:first-child h4, a:first-child h5, a:first-child h6 {
  margin-top: 0;
  padding-top: 0;
}

h1+p, h2+p, h3+p, h4+p, h5+p, h6+p {
  margin-top: 10px;
}

/* LINKS
=============================================================================*/

a {
  color: #4183C4;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* LISTS
=============================================================================*/

ul, ol {
  padding-left: 30px;
}

ul li > :first-child, 
ol li > :first-child, 
ul li ul:first-of-type, 
ol li ol:first-of-type, 
ul li ol:first-of-type, 
ol li ul:first-of-type {
  margin-top: 0px;
}

ul ul, ul ol, ol ol, ol ul {
  margin-bottom: 0;
}

dl {
  padding: 0;
}

dl dt {
  font-size: 14px;
  font-weight: bold;
  font-style: italic;
  padding: 0;
  margin: 15px 0 5px;
}

dl dt:first-child {
  padding: 0;
}

dl dt>:first-child {
  margin-top: 0px;
}

dl dt>:last-child {
  margin-bottom: 0px;
}

dl dd {
  margin: 0 0 15px;
  padding: 0 15px;
}

dl dd>:first-child {
  margin-top: 0px;
}

dl dd>:last-child {
  margin-bottom: 0px;
}

/* CODE
=============================================================================*/

pre, code, tt {
  font-size: 12px;
  font-family: Consolas, "Liberation Mono", Courier, monospace;
}

code, tt {
  margin: 0 0px;
  padding: 0px 0px;
  white-space: nowrap;
  border: 1px solid #eaeaea;
  background-color: #f8f8f8;
  border-radius: 3px;
}

pre>code {
  margin: 0;
  padding: 0;
  white-space: pre;
  border: none;
  background: transparent;
}

pre {
  background-color: #f8f8f8;
  border: 1px solid #ccc;
  font-size: 13px;
  line-height: 19px;
  overflow: auto;
  padding: 6px 10px;
  border-radius: 3px;
}

pre code, pre tt {
  background-color: transparent;
  border: none;
}

kbd {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-color: #DDDDDD;
    background-image: linear-gradient(#F1F1F1, #DDDDDD);
    background-repeat: repeat-x;
    border-color: #DDDDDD #CCCCCC #CCCCCC #DDDDDD;
    border-image: none;
    border-radius: 2px 2px 2px 2px;
    border-style: solid;
    border-width: 1px;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    line-height: 10px;
    padding: 1px 4px;
}

/* QUOTES
=============================================================================*/

blockquote {
  border-left: 4px solid #DDD;
  padding: 0 15px;
  color: #777;
}

blockquote>:first-child {
  margin-top: 0px;
}

blockquote>:last-child {
  margin-bottom: 0px;
}

/* HORIZONTAL RULES
=============================================================================*/

hr {
  clear: both;
  margin: 15px 0;
  height: 0px;
  overflow: hidden;
  border: none;
  background: transparent;
  border-bottom: 4px solid #ddd;
  padding: 0;
}

/* TABLES
=============================================================================*/

table th {
  font-weight: bold;
}

table th, table td {
  border: 1px solid #ccc;
  padding: 6px 13px;
}

table tr {
  border-top: 1px solid #ccc;
  background-color: #fff;
}

table tr:nth-child(2n) {
  background-color: #f8f8f8;
}

/* IMAGES
=============================================================================*/

img {
  max-width: 100%
}
</style>
<script type="text/javascript">
  document.addEventListener("DOMContentLoaded", function() {

    // 生成目录列表
    var div1 = document.createElement("div");
    div1.style.cssText = "clear:both";
    var outline = document.createElement("div");
    outline.setAttribute("id", "outline-list");
    outline.style.cssText = "border:solid 1px #ccc; background:#eee; min-width:200px;padding:4px 10px;";

    var ele_p = document.createElement("p");
    ele_p.style.cssText = "text-align: left; margin: 0;";
    outline.appendChild(ele_p);

    var ele_span = document.createElement("span");
    // ele_span.style.cssText = "float: left;";
    var ele_text=document.createTextNode("目录");
    ele_span.appendChild(ele_text);

    var ele_a = document.createElement("a");
    ele_a.appendChild(document.createTextNode("[+]"));
    ele_a.setAttribute("href", "#");
    ele_a.setAttribute("onclick", "javascript:return openct(this);");
    ele_a.setAttribute("title", "点击打开目录");

    ele_span.appendChild(ele_a);
    ele_p.appendChild(ele_span);

    var ele_ol = document.createElement("ol");
    ele_ol.style.cssText = "display:none;margin-left:14px;padding-left:14px;line-height:160%;";
    ele_ol.setAttribute("id", "outline_ol");
    outline.appendChild(ele_ol);
    var div1 = document.createElement("div");
    div1.style.cssText = "clear:both";

    document.body.insertBefore(outline, document.body.childNodes[0]);
    // 获取所有标题
    var headers = document.querySelectorAll('h1,h2,h3,h4,h5,h6');
    if (headers.length < 2)
      return;

    // -----
    var old_h = 0, ol_cnt = 0;
    // -----

    for (var i = 0; i < headers.length; i++) {

      var ele_ols = null;
      var ele_Current = ele_ol;
      // 找出它是H几，为后面前置空格准备
      var header = headers[i];
      header.setAttribute("id", "t" + i + header.tagName);
      var h = parseInt(header.tagName.substr(1), 10);

      // -----
      if (!old_h){
        old_h = h;

      }

      if (h > old_h) {

        ele_ols = document.createElement("ol");
        ele_Current = ele_ol;
        if(ele_Current && ol_cnt > 0){
          var temp = ol_cnt;
          while(temp > 0){
            ele_Current = ele_Current.lastChild;
            temp--;
          }
        }
        ele_Current.lastChild.appendChild(ele_ols);
        ol_cnt++;
      } else if (h < old_h && ol_cnt > 0) {

        if (h == 1) {
          while (ol_cnt > 0) {
            ol_cnt--;
          }
        } else {
          ele_ols = document.createElement("ol");
          ele_Current = ele_ol;
          if(ele_Current && ol_cnt > 0){
            var temp = ol_cnt;
            while(temp > 1){
              ele_Current = ele_Current.lastChild;
              temp--;
            }
          }
        // var ele_Parent = ele_Current.parentNode();
        //ele_Current.appendChild(ele_ols);
        ol_cnt--;

        }
      } else if (h == old_h && ol_cnt > 0) {

        ele_Current = ele_ol;
        if(ele_Current && ol_cnt > 0){
          var temp = ol_cnt;
          while(temp > 0){
            ele_Current = ele_Current.lastChild;
            temp--;
          }
        }
        ele_Current = ele_Current.lastChild;
      }
      if (h == 1) {
        while (ol_cnt > 0) {
          ol_cnt--;
        }
      }
      if (h < old_h && ol_cnt > 0 && h != 1){
        ele_li = document.createElement("li")
        ele_Current.lastChild.appendChild(ele_li);
        old_h = h;
        var a = document.createElement("a");
        // 为目录项设置链接
        a.setAttribute("href", "#t" + i + header.tagName);
        // 目录项文本前面放置对应的空格
        a.innerHTML = header.textContent;
        ele_li.appendChild(a);
        continue;
      }

      old_h = h;
      // -----
      if (ele_ols){
        ele_li = document.createElement("li")
        ele_ols.appendChild(ele_li); 
      } else {
        ele_li = document.createElement("li")
        ele_Current.appendChild(ele_li);
      }
      var a = document.createElement("a");
      // 为目录项设置链接
      a.setAttribute("href", "#t" + i + header.tagName);
      // 目录项文本前面放置对应的空格
      a.innerHTML = header.textContent;
      ele_li.appendChild(a);
    }
    // -----
    while (ol_cnt > 0) {
      ol_cnt--;
    }
    // -----
    });
function openct(e) {
  if (e.innerHTML == '[+]') {
    // createTextNode
    e.setAttribute('title', '收起');
    e.innerHTML = '[-]';
    var element = document.getElementById("outline_ol");
    element.style.cssText = "margin-left:14px;padding-left:14px;line-height:160%;";
  } else {
    e.setAttribute('title', '展开');
    e.innerHTML = '[+]';
    var element = document.getElementById("outline_ol");
    element.style.cssText = "display:none;margin-left:14px;padding-left:14px;line-height:160%;";
  }
  e.blur();
  return false;
}
</script>
</head>
<body>
<h1>Web-day01</h1>
<h2>一.Java知识体系</h2>
<p><img src="1_1.png" /></p>
<h2>二.课程介绍</h2>
<h3>1.HTML(1.5天)</h3>
<ul>
<li>勾勒出网页的结构和内容</li>
</ul>
<h3>2.CSS(3天)</h3>
<ul>
<li>美化网页</li>
</ul>
<h3>3.JavaScript(4天)</h3>
<ul>
<li>可以让网页呈现动态的数据和效果</li>
</ul>
<h3>4.jQuery(1.5天)</h3>
<ul>
<li>是一个框架,可以极大的提高JS的编程效率</li>
</ul>
<h2>三.WEB概述</h2>
<p><img src="1_2.png" /></p>
<h2>四.XML和HTML</h2>
<h3>1.XML</h3>
<ul>
<li>可扩展(自定义)标记语言</li>
<li>标签、属性、嵌套关系均可扩展</li>
<li>用来存储或传输数据</li>
</ul>
<h3>2.HTML</h3>
<ul>
<li>超文本标记语言</li>
<li>标签、属性、嵌套关系均固定(W3C)</li>
<li>用来显示数据</li>
<li>HTML有些版本完全用XML规范定义的</li>
</ul>
<blockquote>
<p>可以将HTML理解为标签固定的XML</p>
</blockquote>
<h2>补充1:创建WEB项目的注意事项</h2>
<h3>1.选择JavaEE视图</h3>
<ul>
<li>在Eclipse右上角选择JavaEE</li>
</ul>
<h3>2.解决报错</h3>
<ul>
<li>展开项目</li>
<li>右键Deployment</li>
<li>点击Generate</li>
</ul>
<h2>五. 标签</h2>
<h3>1. &lt; !DOCTYPE html&gt;</h3>
<h3>2. &lt; html&gt;&lt; /html&gt; 唯一的根元素</h3>
<ul>
<li>内部有两个子元素&lt; head&gt;&lt; /head&gt; 和 &lt; body&gt;&lt; /body&gt;</li>
</ul>
<h4>2.1&lt; head&gt;&lt; /head&gt;  对网页做出基本的声明</h4>
<ul>
<li>内部有两个子元素 &lt; meta&gt;&lt; /meta&gt; 和 &lt; title&gt;&lt; /title&gt;</li>
</ul>
<h4>2.1.1&lt; meta&gt;&lt; /meta&gt; 声明网页的编码</h4>
<pre><code>&lt; meta&gt; charset=&quot;utf-8&quot;&lt; meta&gt;
</code></pre>

<h4>2.1.2&lt; title&gt;&lt; /title&gt; 声明网页的标题</h4>
<pre><code>&lt;title&gt;第一个网页&lt;/title&gt;
</code></pre>

<h4>2.2&lt; body&gt;&lt; /body&gt;  用来书写网页的内容</h4>
<pre><code>&lt;body&gt;
    HTML真棒
&lt;/body&gt;
</code></pre>

<h3>3.&lt; h1&gt;&lt; /h1&gt; 标题</h3>
<h3>4.&lt; p&gt;&lt; /p&gt; 段落</h3>
<h3>5.列表</h3>
<h4>5.1&lt; ol&gt;&lt; /ol&gt; 有序列表</h4>
<h4>5.2&lt; ul&gt;&lt; /ul&gt; 无序列表</h4>
<h4>5.3&lt; li&gt;&lt; /li&gt;定义列表项目</h4>
<h4>5.4列表嵌套</h4>
<pre><code>&lt;!-- 嵌套列表 --&gt;
    &lt;ol&gt;
        &lt;li&gt;
            河北省
            &lt;ul&gt;
                &lt;li&gt;石家庄&lt;/li&gt;
                &lt;li&gt;保定&lt;/li&gt;
            &lt;/ul&gt;           
        &lt;/li&gt;
        &lt;li&gt;
            山西省
            &lt;ul&gt;
                &lt;li&gt;太原&lt;/li&gt;
                &lt;li&gt;大同&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/li&gt;
    &lt;/ol&gt;
</code></pre>

<h3>6.行内元素</h3>
<h4>6.1&lt; span&gt;&lt; /span&gt; 为部分文本设置样式属性</h4>
<pre><code>&lt;span style=&quot;color:red&quot;&gt;中鼎大厦&lt;/span&gt;
</code></pre>

<h4>6.2&lt; b&gt;&lt; /b&gt; 加粗</h4>
<h4>6.3&lt; i&gt;&lt; /i&gt; 斜体</h4>
<h4>6.4&lt; del&gt;&lt; /del&gt;删除线</h4>
<h4>6.5&lt; u&gt;&lt; /u&gt; 下划线</h4>
<h4>6.6&lt; em&gt;&lt; /em&gt; 着重文字</h4>
<h4>6.7&lt; strong&gt;&lt; /strong&gt; 加重文字</h4>
<h4>6.8&lt; br&gt;  换行</h4>
<h4>6.9实体引用</h4>
<p><img src="day01-01.png" /></p>
<h3>7.&lt; img src = &quot; &quot;/&gt; 图片</h3>
<ul>
<li>1)绝对路径:从盘符开始写出图片的完整路径.这样的方式将路径写死了,一旦软件上线时,路径有变化,代码改动巨大. </li>
<li>
<p>2)相对路径:只需要写出图片和网页的相对关系.</p>
<pre><code>    &lt;!-- 图片和网页平级 --&gt;
    &lt;img src = &quot;01.jpg&quot;/&gt;
    &lt;!-- 图片在网页下级 --&gt;
    &lt;img src = &quot;i/02.jpg&quot;/&gt;
    &lt;!-- 图片在网页上级 --&gt;
    &lt;img src = &quot;../03.jpg&quot;/&gt;
    &lt;!-- 一般这样用 --&gt;
    &lt;img src = &quot;../images/04.jpg&quot;/&gt;
</code></pre>

</li>
</ul>
<h3>8.超链接</h3>
<h4>8.1 &lt; a href=&quot; &quot;&gt;&lt; /a&gt;</h4>
<pre><code>    &lt;a href=&quot;http://www.tmooc.cn&quot;&gt;达内&lt;/a&gt;

    &lt;!-- 从新页打开 --&gt;
    &lt;a href=&quot;http://doc.tedu.cn&quot; target=&quot;_blank&quot;&gt;文档&lt;/a&gt;
</code></pre>

<h4>8.2 &lt; a name=&quot; &quot;&gt;&lt; /a&gt; 设置为锚点</h4>
<pre><code>    &lt;a name=&quot;cang&quot;&gt;&lt; /a&gt;
</code></pre>

<h4>8.3 &lt; a href = &quot;# &quot;&gt;&lt; /a&gt; 设置锚点超链接</h4>
<pre><code>    &lt;a href = &quot;#cang&quot;&gt;刘苍松&lt;/a&gt;
</code></pre>

<h4>8.4&lt; a href = &quot;#&quot;&gt;&lt; /a&gt; 链接到顶部</h4>
<h3>9.表格</h3>
<ul>
<li>跨行与跨列
<img src="1_3.png" /></li>
</ul>
<h4>9.1&lt; table&gt; &lt; /table&gt; 表格标签</h4>
<pre><code>&lt;table border=&quot;1&quot; cellspacing = &quot;0&quot; width = &quot;20%&quot;&gt;
1:表格线宽, 2:单元格与单元格的间距 3:表格的宽度
</code></pre>

<ul>
<li>border:</li>
<li>width/height</li>
<li>align:</li>
<li>cellpadding 单元格边框与内容之间的间距</li>
<li>cellspacing 单元格之间的间距</li>
<li>border-collapse:separate/collapse:合并相邻的边框</li>
</ul>
<h4>9.2&lt; tr&gt;&lt; /tr&gt; 行标签</h4>
<pre><code>    跨列
    &lt;td colspan = &quot;2&quot;&gt;苍老师&lt;/td&gt;
</code></pre>

<ul>
<li>align/valign/colspan 水平对齐/垂直对齐</li>
</ul>
<h4>9.3&lt; td&gt;&lt; /td&gt; 列标签(单元格)</h4>
<ul>
<li>
<p>align/valign/width/height/rowspan</p>
<pre><code>跨行
&lt;td rowspan = &quot;2&quot;&gt;苍老师&lt;/td&gt;


    &lt;tr&gt;
        &lt;td&gt;苍老师&lt;/td&gt;
        &lt;td&gt;范传奇&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td&gt;王克晶&lt;/td&gt;
        &lt;td&gt;程祖红&lt;/td&gt;
    &lt;/tr&gt;
</code></pre>

</li>
</ul>
<h3>10.行分组</h3>
<h4>10.1&lt; thread&gt;&lt; /thread&gt; 表头行分组</h4>
<h4>10.2&lt; tbody&gt;&lt; /tbody&gt; 表体行分组</h4>
<pre><code>设置表体线的颜色
&lt;tbody style=&quot;color:blue&quot;&gt;&lt;/tbody&gt;
</code></pre>

<h4>10.3&lt; tfoot&gt;&lt; /tfoot&gt; 表尾行分组</h4>
<h2>11.英雄联盟案例</h2>
<h3>11.1 先分区(3)</h3>
<ul>
<li>每个区域都需要加边框,设置宽度,居中</li>
<li>style=&quot;border:1px solid red;width:960px;margin:0 auto;&quot;</li>
</ul>
<h3>11.2 逐个区域开发</h3>
<p><img src="1_4.png" /></p>
<h1>Web-day02</h1>
<h2>1.表单</h2>
<ul>
<li>表单用来输入数据,用来发送数据的元素 </li>
</ul>
<h3>1) &lt; form&gt;&lt; /form&gt; 表单元素</h3>
<ul>
<li>用来声明表单的范围,只有在此范围内的控件中的数据才能发送给服务器.</li>
<li>
<p>属性:</p>
<ul>
<li>action:声明表单提交的目标</li>
<li>method:</li>
<li>
<p>enctype: </p>
<p>&lt; form action = &quot;http://doc.tedu.cn&quot;&gt;&lt; /form&gt;</p>
</li>
</ul>
</li>
</ul>
<h3>2)表单控件</h3>
<ul>
<li>用来输入数据</li>
</ul>
<h4>2.1)input 元素(9个)</h4>
<pre><code>    单标签:
    &lt; input type=&quot;text&quot; value=&quot;rarena&quot; maxlength=&quot;10&quot; readonly/&gt;
</code></pre>

<ul>
<li>
<p>1.type=&quot;text&quot; 文本框</p>
<ul>
<li>value:设置默认值</li>
<li>maxlength:设置最大长度</li>
<li>
<p>readonly:设置只读</p>
<pre><code>账号:&lt; input type=&quot;text&quot; value=&quot;rarena&quot; maxlength=&quot;10&quot; readonly/&gt;
</code></pre>

</li>
</ul>
</li>
<li>
<p>2.type=&quot;password&quot;密码框</p>
<ul>
<li>value:设置默认值</li>
<li>maxlength:设置最大长度</li>
<li>
<p>readonly:设置只读</p>
<pre><code>密码:&lt; input type=&quot;password&quot;/&gt;
</code></pre>

</li>
</ul>
</li>
<li>
<p>3.type = &quot;radio&quot; 单选框</p>
<ul>
<li>同一组radio彼此互斥.:用name=&quot;&quot;来分组</li>
<li>checked:默认选中</li>
<li>
<p>value:将来讲</p>
<pre><code>性别:
&lt; input type=&quot;radio&quot; name=&quot;sex&quot; checked/&gt;男
&lt; input type=&quot;radio&quot; name=&quot;sex&quot;/&gt;女  
</code></pre>

</li>
</ul>
</li>
<li>
<p>4.type=&quot;checkbox&quot; 多选框</p>
<ul>
<li>checked: 默认选中</li>
<li>name:</li>
<li>
<p>value: </p>
<pre><code>兴趣:
    &lt; input type=&quot;checkbox&quot; checked/&gt;美食
    &lt; input type=&quot;checkbox&quot; checked/&gt;竞技
    &lt; input type=&quot;checkbox&quot;/&gt;社交
    &lt; input type=&quot;checkbox&quot;/&gt;旅游 
</code></pre>

</li>
</ul>
</li>
<li>
<p>5.type = &quot;hidden&quot; 隐藏框</p>
<ul>
<li>
<p>value: 默认值</p>
<pre><code>&lt; input type = &quot;hidden&quot; value=&quot;love&quot;/&gt;
</code></pre>

</li>
</ul>
</li>
<li>
<p>6.type =&quot;file&quot; 文件框</p>
<pre><code>    头像:
    &lt; input type =&quot;file&quot;/&gt;
</code></pre>

</li>
<li>
<p>7.type = &quot;submit&quot; 提交按钮</p>
<pre><code>    &lt; input type = &quot;submit&quot; value = &quot;注册&quot;/&gt;
</code></pre>

</li>
<li>
<p>8.type = &quot;reset&quot; 重置按钮</p>
<pre><code>    &lt; input type = &quot;reset&quot; value = &quot;重置&quot;/&gt;
</code></pre>

</li>
<li>
<p>9.type = &quot;button&quot; 普通按钮</p>
<pre><code>    &lt; input type = &quot;button&quot; value = &quot;测试&quot;/&gt;
</code></pre>

</li>
</ul>
<h4>2.2) 其他元素(3个)</h4>
<ul>
<li>
<p>1.&lt; label&gt;&lt; /label&gt;   
</p>
<ul>
<li>
<p>label 用来管理表单中的文本,可以将文本与控件绑定到一起,从而增加了控件的可点击范围,提高了易用性</p>
<pre><code>&lt; input type = &quot;checkbox&quot; id=&quot;c1&quot;/&gt;
&lt; label for=&quot;c1&quot;&gt;我已阅读并自愿遵守此协议!&lt; /label&gt; 
</code></pre>

</li>
</ul>
</li>
<li>
<p>2.&lt; select&gt;&lt; option&gt;&lt; /option&gt;&lt; /select&gt; 下拉菜单 </p>
<ul>
<li>selected: 默认选中</li>
<li>
<p>value:</p>
<pre><code>城市:
&lt;select&gt;
    &lt;option&gt;请选择&lt;/option&gt;
    &lt;option&gt;北京&lt;/option&gt;
    &lt;option selected&gt;上海&lt;/option&gt;
    &lt;option&gt;广州&lt;/option&gt;
    &lt;option&gt;深圳&lt;/option&gt;
&lt;/select&gt;
</code></pre>

</li>
</ul>
</li>
<li>
<p>3.&lt; textarea&gt;&lt; /textarea&gt;  文本域</p>
<ul>
<li>cols:宽度</li>
<li>rows:高度</li>
<li>
<p>readonly:只读 </p>
<pre><code>简介:
    &lt; textarea cols=&quot;30&quot; rows=&quot;8&quot; readonly&gt;嘿嘿&lt; /textarea&gt;
</code></pre>

</li>
</ul>
</li>
</ul>
<h2>2. CSS 层叠样式表</h2>
<h3>1) 内联样式: 样式定义在单个元素的style属性中直接书写的样式</h3>
<pre><code>    &lt;h1 style = &quot;color:red;&quot;&gt;CSS&lt;/h1&gt;
</code></pre>

<h3>2) 内部样式:样式定义在html页头元素style标签内书写的样式</h3>
<pre><code>    在&lt;head&gt;标签中:

    &lt;style&gt;
        /*CSS注释是这样的 */
        h2{
            color:blue;
        }
    &lt;/style&gt;
</code></pre>

<h3>3) 外部样式:在外部单独的CSS文件中(.css文件)书写样式</h3>
<pre><code>    首先在&lt;head&gt;标签内引用样式表文件:
    &lt;link rel=&quot;stylesheet&quot; href=&quot;my.css&quot;/&gt;

    my.css文件中:
        p{
            color:yellow;
        }
</code></pre>

<h3>4)层叠样式三种规则特性:</h3>
<ul>
<li>1.继承性:父元素 上面的样式可以被子元素继承(颜色,字体,字号)</li>
<li>2.层叠性:给一个元素增加不同的声明,其效果会产生叠加.</li>
<li>3.优先级:给一个元素增加相同的声明,其效果以后者为准,也叫就近原则</li>
</ul>
<h3>5)CSS语法规范:</h3>
<ul>
<li>每个样式规则有两个部分:选择器和样式声明</li>
</ul>
<h2>3.CSS选择器</h2>
<h3>1)元素选择器</h3>
<ul>
<li>通过元素名来选择CSS作用的目标 </li>
<li>如:&lt; h&gt; &lt; h1&gt; &lt; body&gt;</li>
<li>如果页面中有多个相同的元素需要重用同样的效果,建议使用元素选择器</li>
</ul>
<h3>2).className {} 类选择器:选择class=某值的所有元素,用来选择一类元素</h3>
<pre><code>CSS 代码
.female {
    color:pink;
}

HTML代码:
&lt;p class=&quot;female&quot;&gt;绿树浓荫夏日长&lt; /p&gt;
</code></pre>

<h3>3)#idName {} id选择器:选择id=某值的唯一元素</h3>
<pre><code>    CSS 代码:
    #p4{
        color:red;
    }

    HTML代码:
    &lt;p id=&quot;p4&quot;&gt;绿树浓荫夏日长&lt;/p&gt;
</code></pre>

<h3>4)选择器组:写出一组选择器,逗号隔开,可以选中每个选择器所对应的目标的并集</h3>
<pre><code>    CSS代码:
    .female,#p4 {

        font-weight:bold;
    }
</code></pre>

<h3>5)派生选择器:用来选择子元素</h3>
<h4>5.1)后代选择器: 选择某元素的所有后代(子孙)元素</h4>
<pre><code>CSS代码:
#p5 b{
    color:red;  
    font-size:5px
}
HTML代码:    &lt;!-- 目标为&quot;北三环&quot;三个字 --&gt;
&lt;p id = &quot;p5&quot;&gt;北京市&lt;u&gt;海淀区&lt;b&gt;北三环&lt;/b&gt;西路&lt;/u&gt;甲18号&lt;b&gt;中鼎大厦&lt;/b&gt;B座8层&lt;/p&gt;
</code></pre>

<h4>5.2)子元素选择器:选择某元素的所有子元素(儿子)</h4>
<pre><code>CSS代码:
#p5&gt;b {
    font-size:30px  
}

HTML代码:    &lt;!-- 目标为&quot;中鼎大厦&quot;四个字 --&gt;
&lt;p id = &quot;p5&quot;&gt;北京市&lt;u&gt;海淀区&lt;b&gt;北三环&lt;/b&gt;西路&lt;/u&gt;甲18号&lt;b&gt;中鼎大厦&lt;/b&gt;B座8层&lt;/p&gt;
</code></pre>

<h3>6)伪类选择器:根据元素状态选择元素</h3>
<h4>6.1) 选择访问过/未访问过的超链接</h4>
<ul>
<li>
<p>未被访问过的
	a:link { <br />
		color:green;
	}</p>
</li>
<li>
<p>访问过的</p>
<pre><code>a:visited {   /*访问过的*/
    color:red
}
</code></pre>

</li>
</ul>
<h4>6.2)选择激活态(正在点)的按钮</h4>
<pre><code>    \#btn1:active{
        background-color:yellow;
    }
</code></pre>

<h4>6.3)选择有焦点(光标)的框/</h4>
<pre><code>    #t1:focus {
        background-color:pink;
    }
</code></pre>

<h4>6.4)选择悬停态(鼠标位于正上方)的元素</h4>
<pre><code>    img:hover{
        width:250px;
        height:250px;
    }
</code></pre>

<h2>4.border与box</h2>
<p><img src="2_2.png" /></p>
<h3>4.1)border属性:用来设置元素边框</h3>
<ul>
<li>
<p>默认情况下,元素的高度会自适应,有多少行字它就有多高,不会溢出.当给元素固定了高度后就可能导致内容的溢出. </p>
</li>
<li>
<p>四边设置语法:</p>
<ul>
<li>border:width值 style值 color值;</li>
</ul>
</li>
<li>
<p>单边设置语法:</p>
<ul>
<li>border-left:width值 style值 color值;</li>
<li>border-right:width值 style值 color值;</li>
<li>border-top:width值 style值 color值;</li>
<li>border-bottom:width值 style值 color值;</li>
</ul>
</li>
<li>
<p>width单位:</p>
<ul>
<li>%:百分比</li>
<li>px:像素</li>
<li>em(1em等于当前文字的尺寸,2em等于当前文字尺寸的两倍)</li>
</ul>
</li>
<li>
<p>color单位:</p>
<ul>
<li>#rrggbb:十六进制</li>
<li>#rgb:十六进制简写</li>
<li>rgb(x,x,x):RGB值</li>
<li>rgb(x%,x%,x%):RGB百分比值</li>
<li>
<p>red:英文单词
<img src="2_1.png" /></p>
<pre><code>/* 单边设置 */
h1{
    border-left: 15px solid blue;
}

/* 四个边增加边框 */
p{
    border: 1px dashed red;
}

/*默认情况下,元素的高度会自适应,有多少行字它就有多高,不会溢出.当给元素固定了高度后就可能导致内容的溢出. */
p{
    width: 200px;
    height:50px;    
    overflow:auto
}
</code></pre>

</li>
</ul>
</li>
<li>
<p>overflow:当内容溢出元素框时如何处理</p>
<ul>
<li>isible</li>
<li>hidden</li>
<li>scroll</li>
<li>auto</li>
</ul>
</li>
</ul>
<h3>4.2)box 框模型 :定义了元素框处理元素内容,内边距,边框,和外边距的方式</h3>
<ul>
<li>
<p>属性:</p>
<ul>
<li>background-color:背景颜色</li>
<li>
<p>background-image:背景图片</p>
<p>body{
	background-image:url('../images/01.png');
}</p>
</li>
<li>
<p>background-repeat:控制背景图片的平铺效果,可取值为</p>
<ul>
<li>repeat:垂直方向和水平方向重复</li>
<li>repeat-x:仅在水平方向重复</li>
<li>repeat-y:仅在垂直方向重复</li>
<li>no-repeat:仅显示一次</li>
</ul>
</li>
</ul>
</li>
</ul>
<h4>4.2.1)单边设置:给四个边设置不同的边距</h4>
<ul>
<li>
<p>方式一:</p>
<pre><code>#d2{
    /*顺序 : 上 右 下 左 */
    padding:10px 20px 30px 40px;
    margin:40px 30px 20px 10px;
}
</code></pre>

</li>
<li>
<p>方式二:</p>
<pre><code>#d3{
    padding-top:20px;
    padding-right:40px;
    padding-bottom:20px;
    padding-left:40px;
    margin-top:20px;
    margin-right:40px;
    margin-bottom:20px;
    margin-left:40px;
}
</code></pre>

</li>
</ul>
<h4>4.2.2) 四边设置相同的边距</h4>
<pre><code>    #d1 {
        padding:20px;
        margin:40px;
    }
</code></pre>

<h4>4.2.3)对称设置边距</h4>
<ul>
<li>
<p>2个参数,第一个参数为上和下,第二个参数为 左和右</p>
<pre><code>#d5{
    padding:20px 40px;
    margin:30px 50px;
}
</code></pre>

</li>
</ul>
<h4>4.2.4)单边设置边距</h4>
<pre><code>#d3{
    padding-left:20px;
    margin-bottom:30px;
    }   
</code></pre>

<h4>4.2.5)对称设置外边距的特例:当左右为auto时,元素会水平居中</h4>
<pre><code>     #d5{
        margin:20px auto;
      }
</code></pre>

<h2>5. 背景</h2>
<h3>5.1 background-color 背景色</h3>
<h3>5.2 background-image 背景图片</h3>
<ul>
<li>background-repeat:属性,可以控制背景图片的平铺效果</li>
</ul>
<blockquote>
<p>repeat:在垂直和水平方向重复</p>
<p>repeat-x:仅在水平方向重复</p>
<p>repeat-y:仅在垂直方向重复</p>
<p>no-repeat:仅显示一次</p>
</blockquote>
<ul>
<li>background-position: 属性用于改变背景图片在元素中的位置</li>
</ul>
<blockquote>
<p>x% y%:第一个值为水平位置,第二个值为垂直位置</p>
<p>x y:第一个值为水平位置,第二个值为垂直位置</p>
<p>left:  左边显示</p>
<p>center:中心显示</p>
<p>right:右边显示</p>
<p>top:顶部显示</p>
<p>bottom:底部显示</p>
</blockquote>
<ul>
<li>background-attachment:属性来改变此特征</li>
</ul>
<blockquote>
<p>scroll:默认情况下背景会随文档滚动</p>
<p>fixed:背景图像固定,并不会随着页面的其余部分滚动,常用于实现水印图像</p>
</blockquote>
<h1>web-day03</h1>
<h2>1.选择器的优先级</h2>
<h3>1.1 选择器的优先级看权重(分值)</h3>
<ul>
<li>元素选择器: 1</li>
<li>类选择器: 10</li>
<li>ID选择器: 100</li>
</ul>
<blockquote>
<p>权重越大优先级越高</p>
</blockquote>
<h3>1.2 举例</h3>
<ul>
<li>.data: 10</li>
<li>.content&gt;div: 10+1</li>
<li>.content&gt;.data: 10+10</li>
</ul>
<blockquote>
<p>增加父亲不会影响逻辑,但是会提高选择器的优先级</p>
</blockquote>
<h2>2.W3C中文手册</h2>
<ul>
<li>外网: www.w3school.com.cn</li>
<li>内网: doc.tedu.cn</li>
</ul>
<h2>3.文本格式化</h2>
<ul>
<li>font-family:value1,value2; 指定字体</li>
<li>font-size:value;  指定字体大小</li>
<li>font-weight:normal/bold; 字体加粗</li>
<li>color:value; 文本颜色</li>
<li>text-align:left/right/center;文本排列</li>
<li>text-decoration:none/underline; 下划线</li>
<li>line-height: value(1.6em); 行高</li>
<li>text-indent:value(2em);首行文本缩进</li>
</ul>
<p><img src="3_1.png" /></p>
<h2>4.表格样式</h2>
<ul>
<li>表格同样可以使用box模型(边框,内边距,宽,高)以及文本格式化属性</li>
<li>
border-collapse属性:表格特有的样式属性:设置是否将表格相邻边框合并为单一边框
<ul>
<li>separate:不合并</li>
<li>collapse:合并</li>
</ul>
</li>
</ul>
<h1>Web-day04</h1>
<h2>1.定位</h2>
<h3>1.1 什么是定位</h3>
<ul>
<li>用来解决元素的排列(摆放)问题</li>
</ul>
<blockquote>
<p>采用定位可以将元素摆放到网页的任意的位置</p>
</blockquote>
<h3>1.2 定位的分类</h3>
<ul>
<li>
流定位:默认定位
<ul>
<li>默认情况下,块元素垂直排列,行内元素水平排列</li>
<li>这种默认排列的方式叫默认定位,也叫流定位</li>
</ul>
<blockquote>
<p>流:元素有序排列而形成的队伍</p>
</blockquote>
</li>
<li>
<p>特殊定位:</p>
<ul>
<li>
<p>浮动定位:可以让块元素水平排列</p>
</li>
<li>
<p>相对定位:让元素以自身为目标产生微小的偏移</p>
</li>
<li>
<p>绝对定位:让元素以父辈为目标产生较大的偏移</p>
</li>
<li>
<p>固定定位:让元素以窗口为目标产生巨大的偏移</p>
</li>
</ul>
</li>
</ul>
<blockquote>
<p>后三种定位十分相似</p>
</blockquote>
<h3>1.3 浮动定位</h3>
<ul>
<li>浮动定位是指:1.让元素脱离普通流定位,2.将浮动元素放置在父元素的左边或者右边,3.浮动元素依旧位于父元素之内</li>
<li>作用:可以让块左右排列</li>
<li>分类:左/右浮动</li>
<li>步骤:1)目标离队 2)后者跟进 3)目标到达指定位置</li>
</ul>
<h4>1.3.1 左浮动</h4>
<ul>
<li>
<p>可以让块按照正序左右排列
<img src="4_1.png" /></p>
</li>
<li>
<p>float:none/left/right;属性用于定义元素在哪个方向浮动</p>
</li>
<li>
clear:none/left/right/both;用于清除浮动所带来的影响
<ul>
<li>对哪个元素clear,该元素将不受浮动影响,出现在浮动目标之下
<img src="4_2.png" /></li>
</ul>
</li>
</ul>
<h4>1.3.2 右浮动</h4>
<ul>
<li>作用:可以让块按照倒序左右排列
<img src="4_2_1.png" /></li>
</ul>
<h4>1.3.3 照片墙</h4>
<p><img src="4_3.png" /></p>
<h2>1.4 相对、绝对、固定定位</h2>
<h3>1.4.1 它们的相同点</h3>
<ul>
<li>设置偏移量的方式相同
<img src="4_4.png" /></li>
</ul>
<h4>1.4.2.它们的区别</h4>
<ul>
<li>它们偏移时参考的目标不同</li>
</ul>
<h4>1.4.3 相对定位</h4>
<ul>
<li>以自己为目标,产生小的偏移</li>
<li>元素的位置不释放(不脱离流)</li>
<li>设置元素为相对定位:首先需要设置position属性的值为relative,然后使用left,right,top,bottom设置偏移量</li>
<li>
position: relative;
<ul>
<li>left:设置偏移量</li>
<li>right:设置偏移量</li>
<li>top:设置偏移量</li>
<li>bottom:设置偏移量</li>
</ul>
</li>
</ul>
<blockquote>
<p>元素的位置不释放</p>
</blockquote>
<h4>1.4.4 绝对定位</h4>
<ul>
<li>以带有position属性的父辈为目标</li>
<li>若父辈都有position则以就近的父辈为目标</li>
<li>若父辈都没position则以body为目标</li>
<li>元素的位置释放(脱离流)</li>
<li>
position: absolute;
<ul>
<li>left:设置偏移量</li>
<li>right:设置偏移量</li>
<li>top:设置偏移量</li>
<li>bottom:设置偏移量</li>
</ul>
</li>
</ul>
<blockquote>
<p>想以谁为目标就在谁上面加position</p>
</blockquote>
<p><img src="4_5.png" /></p>
<h4>1.4.5 固定定位</h4>
<ul>
<li>以浏览器的窗口为目标</li>
<li>元素的位置释放(脱离流)</li>
<li>
position: fixed;
<ul>
<li>left:设置偏移量</li>
<li>right:设置偏移量</li>
<li>top:设置偏移量</li>
<li>bottom:设置偏移量</li>
</ul>
</li>
</ul>
<blockquote>
<p>元素会挂在窗口上保持不动</p>
</blockquote>
<h3>1.5 定位的应用</h3>
<h4>1.5.1 选择定位的建议</h4>
<ul>
<li>固定定位: 看看是否要将元素挂在窗口之上</li>
<li>浮动定位: 看看是否要将块左右排列</li>
<li>相对定位: 看看是否元素的位置不释放,释放偏移量很小</li>
<li>绝对定位: 思考15秒之上一般就是绝对定位</li>
</ul>
<h3>1.6 堆叠顺序</h3>
<ul>
<li>
<p>一旦修改了元素的定位方式,则元素可能会发生堆叠</p>
</li>
<li>
<p>z-index 属性:可以控制元素出现的重叠顺序</p>
<ul>
<li>
<p>值为数值:数值越大表示堆叠顺序更高.</p>
</li>
<li>
<p>可以设置为负值:表示离用户更远.</p>
</li>
</ul>
</li>
</ul>
<h2>2. 管理员列表-5</h2>
<p><img src="4_6.png" /></p>
<h2>3.列表样式</h2>
<ul>
<li>
list-style-image:属性使用图像来替换列表项的标记
<ul>
<li>取值为:url(); 指定图像作为有序或无序列表项的标志</li>
</ul>
</li>
<li>list-style-type:属性用于控制列表中列表项标志的样式</li>
<li>
无序列表取值:
<ul>
<li>none:无标记</li>
<li>disc:实心圆,为默认值</li>
<li>circle:空心圆</li>
<li>square:实心方块</li>
</ul>
</li>
<li>
有序列表取值:
<ul>
<li>none:无标记</li>
<li>decimal:数字(如1,2,3),为默认值</li>
<li>lower-roman:小写罗马数字</li>
</ul>
</li>
</ul>
<h2>	- upper-roman:大写罗马数字</h2>
<h2>4. 元素的显示方式</h2>
<h3>4.1 块</h3>
<ul>
<li>特点: 有宽高,上下排列</li>
<li>h#,p,ol,ul,div,table,form</li>
</ul>
<h3>4.2 行内</h3>
<ul>
<li>特点: 无宽高,左右排列</li>
<li>span,b,strong,i,em,u,del,a,lable</li>
</ul>
<h3>4.3 行内块</h3>
<ul>
<li>特点: 有宽高,左右排列</li>
<li>img,input,select,textarea</li>
</ul>
<h3>4.4 如何修改元素的显示方式</h3>
<ul>
<li>display: block;			块</li>
<li>display: inline;			行内</li>
<li>display: inline-block;		行内块</li>
<li>display: none;				隐藏,并释放空间</li>
</ul>
<h2>5.管理员列表-6</h2>
<p><img src="4_7.png" /></p>
<h2>6.鼠标形状</h2>
<ul>
<li>
cursor:属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状
<ul>
<li>default</li>
<li>pointer</li>
<li>crosshair</li>
<li>text</li>
<li>wait</li>
<li>help等</li>
</ul>
</li>
</ul>
<h1>Web-day05</h1>
<h2>1.什么是JavaScript</h2>
<ul>
<li>最早由网景公司在Netscape2.0首先推出了JavaScript,现在由ECMA组织维护. JavaScript是嵌入HTML中在浏览器中的脚本语言,具有和java和C语言类似的语法,用来向HTML页面添加交互行为</li>
<li>
<p>特点:</p>
<ul>
<li>可以使用任何文本编辑工具编写</li>
<li>
<p>由浏览器内置的JavaScript引擎执行代码,事先不编译,逐行执行,内置大量现成对象</p>
</li>
<li>
<p>适宜:客户端数据计算,客户端表单合法性验证, 浏览器事件的触发,网页特殊显示效果制作,服务器的异步数据提交</p>
</li>
</ul>
</li>
</ul>
<h2>2.使用JavaScript</h2>
<blockquote>
<p>事件:就是用户的操作/动作,就是js触发的时机.如:单击,双击事件.</p>
</blockquote>
<ul>
<li>
<p>2.1 事件定义式:在定义事件时直接书写js</p>
<p>&lt; input type=&quot;button&quot; value=&quot;按钮1&quot; onclick=&quot;alert('苍老师');&quot;/&gt;</p>
</li>
<li>
<p>2.2 嵌入式:在script标签内书写js.该标签可以写在网页的任意位置 </p>
<pre><code>&lt; input type=&quot;button&quot; value=&quot;按钮2&quot; onclick=&quot;f2();&quot;/&gt;

&lt; script&gt;
    //1.js中的函数都是公有的
    //2.js中的函数可以有返回值,但是不需要声明类型
    function f2(){
        //js中不区分单引号和双引号
        alert(&quot;范传奇&quot;)                
    }
&lt; /script&gt;
</code></pre>

</li>
<li>
<p>2.3 文件调用式:在单独的js文件中书写js.</p>
<pre><code>- 该标签要么用来引入js,要么用来书写js.  
&lt; script src = &quot;my.js&quot;&gt;&lt; /script&gt;
</code></pre>

</li>
</ul>
<h2>3.基本语法</h2>
<ul>
<li>由Unicode字符集编写</li>
<li>
注释
<ul>
<li>单行://</li>
<li>多行:/* */</li>
</ul>
</li>
<li>
语句
<ul>
<li>表达式,关键字,运算符组成</li>
<li>大小写敏感</li>
<li>使用分号或者换行结束(建议加上分号),一行中有多个语句不能省略分号</li>
</ul>
</li>
</ul>
<h2>4.标识符与关键字</h2>
<ul>
<li>标识符:由不以数字开头的字母,数字,下划线,美元符号组成</li>
<li>
<p>JavaScript语言中代表特定含义的词称为保留字,不允许程序再定义为标识符</p>
<ul>
<li>class int float等</li>
</ul>
</li>
<li>
<p>变量声明:使用关键字var声明变量</p>
</li>
<li>变量初始化:使用&quot;=&quot;赋值 , 没有初始化的变量则自动取值为undefined</li>
</ul>
<h2>5.数据类型</h2>
<ul>
<li>变量没有类型,统一用关键字var声明.变量所引用的数据是有类型的.</li>
<li>
<p><img src="5_1.png" /></p>
</li>
<li>
<p>数据类型的隐式转换:</p>
<ul>
<li>数字+字符串:数字转换为字符串</li>
<li>数字+布尔值:true转换为1,false转换为0</li>
<li>字符串+布尔值:布尔值转换为字符串true或false</li>
<li>布尔值+布尔值:布尔值转换为数值1或0</li>
</ul>
</li>
<li>
<p>数据类型转换函数:</p>
<ul>
<li>toString():所有数据类型均可转换为String类型</li>
<li>parseInt():强转为整数,如果不能转换则返回(NaN)(not a number)</li>
<li>ParseFloat():强转为浮点数,如果不能转,也返回(NaN)</li>
<li>
<p>typeof():查询当前类型,返回string/number/boolean/object/function/undefined</p>
</li>
<li>
<p>isNaN():判断被检测表达式经过转换后是否不是一个数,不是返true,否则返回false </p>
</li>
</ul>
</li>
</ul>
<h2>6.运算符</h2>
<ul>
<li>除(/),java中5/2=2.js中 5/2=5.2;</li>
<li>+ - * % ++ --和java相同</li>
</ul>
<h2>7.关系运算</h2>
<ul>
<li>全等 :===</li>
<li>
<p>不全等:!==</p>
<pre><code>var c = 6;
var d = &quot;6&quot;;
console.log(c==d);//true
console.log(c===d);//false
</code></pre>

</li>
<li>&gt; &lt; &gt;= &lt;= == != 同java</li>
</ul>
<h2>8.逻辑运算</h2>
<ul>
<li>逻辑非! 逻辑与&amp;&amp; 逻辑|| 同java</li>
</ul>
<h2>9.条件运算</h2>
<ul>
<li>又称三目,三元运算 同JAVA</li>
</ul>
<h2>10.分支结构</h2>
<ul>
<li>if,switch-case 同java</li>
</ul>
<h2>11.循环结构</h2>
<ul>
<li>for,while,do-while 同java</li>
</ul>
<h2>12.条件表达式</h2>
<ul>
<li>
<p>js中允许使用任何值做条件,当该值是非布尔值时,若它是空值,则相当于false,若它是非空值,则相当于true.</p>
<p>//这样的规则是为了简化条件表达式.
var k = &quot;hi&quot;;
if(k){
	console.log(&quot;ok&quot;);	
}</p>
<p>var h = 9;
h &amp;&amp; console.log(&quot;猥琐&quot;);  //短路</p>
</li>
</ul>
<h2>13.js调试技巧</h2>
<h3>13.1 看错误信息</h3>
<ul>
<li>看控制台的报错信息</li>
</ul>
<h3>13.2 打桩</h3>
<ul>
<li>跟踪程序执行的过程</li>
<li>看每一步的变量的值是否正确</li>
</ul>
<h3>13.3 排除法</h3>
<ul>
<li>用来定位错误的</li>
<li>建议采用二分法删除代码,以定位错误出现的位置</li>
</ul>
<p>案例 一.计算平方
<img src="5-2.png" /></p>
<p>案例 二.猜数字
<img src="5-3.png" /></p>
<p>案例 三.计算阶乘
<img src="5-4.png" /></p>
<h1>Web-day06</h1>
<h2>一.内置对象</h2>
<h3>1.String对象</h3>
<ul>
<li>几乎和Java一样</li>
</ul>
<h3>2.Number对象</h3>
<ul>
<li>toFixed(n) *</li>
</ul>
<h3>3.Array对象</h3>
<ul>
<li>创建数组</li>
<li>数组倒转方法</li>
<li>数组排序方法(*)</li>
</ul>
<p><img src="6-1.png" /></p>
<h3>4.Math对象</h3>
<ul>
<li>几乎和Java一样</li>
</ul>
<h3>5.Date对象</h3>
<ul>
<li>如何创建日期对象</li>
<li>如何格式化日期对象</li>
<li>如何读写时间分量
<img src="6-2.png" /></li>
</ul>
<h3>6.RegExp对象</h3>
<h4>1)正则对象的方法</h4>
<ul>
<li>如何创建正则对象</li>
<li>test() *</li>
<li>exec()
<img src="6-3.png" /></li>
</ul>
<h4>2)字符串支持正则的方法</h4>
<ul>
<li>replace()</li>
<li>match()</li>
<li>search()</li>
</ul>
<blockquote>
<p>看看W3C中文手册</p>
</blockquote>
<h3>7.Function对象</h3>
<ul>
<li>arguments *</li>
<li>eval *
<img src="6-4.png" /></li>
</ul>
<h2>二.外部对象</h2>
<ul>
<li>外部对象就是浏览器提供的API</li>
<li>外部对象包括BOM和DOM,二者是包含关系
<img src="6-5.png" /></li>
</ul>
<h1>Web-day07</h1>
<h2>一.动态时钟</h2>
<p><img src="7-1.png" /></p>
<h2>二.发送消息</h2>
<p><img src="7-2.png" /></p>
<h2>三.DOM</h2>
<p><img src="7-3.png" /></p>
<h1>Web-day08</h1>
<h2>一.图片轮播</h2>
<p><img src="8-1.png" /></p>
<h2>二.省市联动</h2>
<p><img src="8-2.png" /></p>
<h2>三.加入购物车</h2>
<p><img src="8-3.png" /></p>
<h2>四.加法</h2>
<p><img src="8-4.png" /></p>
<h1>Web-day09</h1>
<h2>一.自定义对象</h2>
<h3>1.分类</h3>
<h4>1.1直接量(JSON)</h4>
<ul>
<li>{&quot;name&quot;:&quot;zhangsan&quot;,&quot;age&quot;:26}</li>
<li>{}代表一个对象,包含多组键值对</li>
<li>key通常是字符串,value可以是任意类型的数据</li>
</ul>
<h4>1.2构造器(首字母大写的函数)</h4>
<h5>1)内置构造器</h5>
<ul>
<li>特殊含义: Array, Date, String, RegExp</li>
<li>通用: Object</li>
</ul>
<h5>2)自定义构造器</h5>
<ul>
<li>定义一个首字母大写的函数</li>
<li>明确声明要传入哪些参数</li>
<li>在函数内写代码将传入的参数保存在此对象上</li>
</ul>
<h3>2.归纳</h3>
<ul>
<li>无论采用哪种方式创建的对象本质上都是Object</li>
<li>若创建的对象给别人调用,建议使用第3种方式</li>
</ul>
<h2>二.事件</h2>
<h3>1.事件概述</h3>
<h4>1)什么是事件</h4>
<ul>
<li>是用户的操作/动作,是js被调用的时机</li>
</ul>
<h4>2)事件分类</h4>
<ul>
<li>鼠标事件</li>
<li>键盘事件</li>
<li>状态事件: 当某条件达成时自动触发的事件</li>
</ul>
<h3>2.事件定义</h3>
<h4>1)直接定义事件</h4>
<ul>
<li>直接在元素上通过事件属性定义事件</li>
<li>优点:直观</li>
<li>缺点:耦合度高</li>
</ul>
<h4>2)动态绑定事件</h4>
<ul>
<li>在页面加载后,通过js获取元素并给它追加事件</li>
<li>优点:耦合度低</li>
<li>缺点:不直观</li>
</ul>
<h4>3)如何取消事件</h4>
<ul>
<li>return false</li>
</ul>
<h3>3.事件对象</h3>
<h4>1)什么是事件对象</h4>
<ul>
<li>背景:在某些功能里,需要获得鼠标的坐标,键盘的按键等信息</li>
<li>事实上,在事件触发的那一刻,浏览器会自动创建一个对象event</li>
<li>浏览器会把和本次事件相关的所有信息存入此对象</li>
<li>这个封装事件信息的对象event叫做事件对象</li>
</ul>
<h4>2)事件对象如何使用</h4>
<ul>
<li>直接定义事件时: 在调用函数时传入event</li>
<li>动态绑定事件时: 浏览器自动给函数传入event</li>
</ul>
<h3>4.事件机制</h3>
<h4>1)冒泡机制</h4>
<ul>
<li>事件是由内向外传播的</li>
</ul>
<h4>2)如何取消冒泡</h4>
<ul>
<li>e.stopPropagation()</li>
<li>e.cancelBubble = true</li>
</ul>
<h4>3)冒泡机制的作用(*)</h4>
<ul>
<li>用来简化事件的定义</li>
</ul>
<h4>4)需要解决的问题</h4>
<ul>
<li>获取事件源</li>
<li>e.srcElement || e.target</li>
</ul>
<h3>5.计算器案例</h3>
<p><img src="9-1.png" /></p>

</body>
</html>
<!-- This document was created with MarkdownPad, the Markdown editor for Windows (http://markdownpad.com) -->
